<!DOCTYPE html>
<html style="height:100%">
<head>
    <meta charset="utf-8" />
    <title>Look At</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body style="margin:0px;height:100%;">
    <div id="main" style="width:100%;height:100%;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });
    require(
        [
            "zrender",
            "zrender/shape/Polygon"
        ], 
        function(zrender, Polygon){
            var zr = zrender.init(document.getElementById('main'));
            var arrow = new Polygon({
                style: {
                    pointList: [[-10, 0], [10, 0], [0, 30]]
                },
                position: [zr.getWidth() / 2, zr.getHeight() / 2],
            });
            arrow.scale[1] = 1.5;
            zr.addShape(arrow);
            zr.render();


            zr.on('mousemove', function(e) {
                var p = [e.event.clientX, e.event.clientY];
                arrow.lookAt(p);
                zr.modShape(arrow.id);
                zr.refreshNextFrame();
            });
        }
    );
    </script>
</body>
</html>